<template>
<div id="register-page">
    <van-nav-bar
            title="注册用户"
            left-text="返回"
            right-text="提交"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
    />
    <van-field type="text" v-model="username" label="用户名"
                               placeholder="请输入用户名"
                               left-icon="contact" clearable required />
    <van-field type="password" v-model="password" label="输入密码"
           placeholder="请输入密码"
           left-icon="closed-eye" clearable required />
    <van-field type="password" v-model="password" label="重复输入密码"
       placeholder="请输入密码"
       left-icon="closed-eye" clearable required />
     <van-button type="primary" size="large" @click="register">提交</van-button>
</div>

</template>

<script>
    import {NavBar, Field , Button, Toast } from 'vant';
    import axios from 'axios';

    export default {
        name: "register",
        components: {
            'van-field':Field,
            // 'van-password-input':PasswordInput,
            'van-nav-bar':NavBar,
            'van-button':Button,
        },
        data(){
          return{
              username: '',
              password: ''
          }
        },
        methods:{
            onClickLeft() {
                this.$toast('返回');
                this.$router.push({ path:'/login'});
                },
            onClickRight() {
                  Toast('按钮');
                },
            register(){
                let self = this
                if(self.username == ''){
                  self.$toast("用户名不能为空");
                  return false;
                }
                if(self.password == ''){
                  self.$toast("密码不能为空");
                  return false;
                }
                else {
                    axios.post('/api/jwt-login/',
                        {
                            params: {
                            userName: self.username
                            }
                    })
                }
            }
        }
    }
</script>

<style scoped>

</style>